<template>
	<view class="classList">
		<view class="loadMoreLayout" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="`/pages/preview/preview?id=${item._id}`" class="item" v-for="(item,index) of classList"
				:key="index">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>

		<uni-load-more v-if="classList.length || noData" :status="noData?'noMore':'loading'"></uni-load-more>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		apiGetClassList
	} from '@/api/api.js'

	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'

	let classList = ref([]);
	let noData = ref(false)
	let queryString = {
		pageNum: 1,
		pageSize: 12
	}

	// onLoad的执行时间较为靠后
	onLoad((e) => {
		queryString.classid = e.classid;
		uni.setNavigationBarTitle({
			title: e.name
		})
		getClassList(queryString)
	})


	/**
	 * 触底操作
	 */
	onReachBottom(() => {
		if (noData.value) return;
		queryString.pageNum++;
		getClassList(queryString)
	})


	/**
	 * 获取指定列表
	 */
	async function getClassList(queryString) {
		let ret = await apiGetClassList(queryString);
		classList.value = [...classList.value, ...ret.data];
		if (ret.data.length < queryString.pageNum) noData.value = true;
		uni.setStorageSync("storageClassList", classList.value)
	}
</script>

<style lang="scss" scoped>
	.classList {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5rpx;
			padding: 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>